@charset "UTF-8";



.tope{height:15vh; }

#contacto{height:15vh; }



input{color:red;}



h6{color:lightgreen;}



header{

  height: 15vh;

  width: 100%;

  position: fixed;

  z-index: 2;

  background-color: darkgreen;

  background-repeat: no-repeat;

  background-size: cover;

  border-color: green;

  background-blend-mode: lighten;

  background-image: url(../imagenes/fondo3.jpeg);

  }



header:hover

  {background-blend-mode: soft-light;

  transition: 3s ease-out;}







nav{position: relative;}





header #minimenu span {
  padding: .5em;
  background: darkred;
  color:yellow;
  position:absolute !important;
  right:10vw;
  font-size: 3vh;
  border: solid red 1px;
  border-radius: 20px;
  top:.5vh;
  -webkit-animation-name: anima;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-out
        -webkit-animation-fill-mode: both;
       animation-name: anima;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-out;
    animation-fill-mode: both;}

.anima {
    -webkit-animation-name: anima;
        -webkit-animation-delay: .5s;
        -webkit-animation-duration: 5s;"
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-fill-mode: both;
       
}
.anima {
        animation-name: anima;
        animation-delay: 0s;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-timing-function: ease-out
        animation-fill-mode: both;
  }

 @-webkit-keyframes anima{
    0%{box-shadow: 0 0 1px #fff;}
    100%{box-shadow: 0 0  20px #fff;}
  }

  @keyframes anima{
    0%{box-shadow: 0 0 1px #fff;}
    100%{box-shadow: 0 0  20px #fff;}
  }



  /*display:none;*/

}



header #minimenu span#encender{z-index:10;}

header #minimenu  span#apagar{z-index:9; }





p{

  font-size: .9em;

}



h1,h2,h3,h4,h5,h6   {

  text-transform: capitalize;

  font-size: 2em;

  font-weight: 100;

  margin:auto;

  padding: .5em;

  font-family: font-family: 'Didact Gothic', sans-serif;;

   }



  h1,h2{

    text-align: right;

    font-size: 4vh;

    color:#fff;

    text-decoration: none;

  }



a{font-family: 'Libre Franklin', sans-serif;}



p{font-family: 'Libre Franklin', sans-serif;}



h3{color:;

text-transform: uppercase;

font-family: font-family: 'Didact Gothic', sans-serif;}





h5{color:#666;

    font-family: 'Didact Gothic', sans-serif;}

h6{font-family: 'Didact Gothic', sans-serif;}



  #spanh1{text-transform: uppercase; font-weight: 200;}



  h2,h3,h4,h5,h6{text-align: center; }



  h3{text-decoration: none;

      color:#888;

      line-height: 1.3em;}



      .col-lg-11 {

          width: 95%;



    left: 15%}



#lateral{



  position: fixed;

  z-index: 2;

  top:45vh;

  text-decoration: none;

  text-align: center;

  text-transform: capitalize;

  line-height: 1.5em;

  font-weight: 200;

}



#lateral a {

  width: 85%;

  height: 4em;

  background-color: black;

  display: block;

  border-radius: 5px;

  margin: .25em;

  line-height: 4em;

  font-size: 1em;

  padding: auto;}







body {background-color: rgba(0,0,0,.75);

      background-image: url(../imagenes/fondo1.jpeg);

      background-attachment: fixed;

      background-size: cover;
	background-blend-mode: darken;
      }





/**/

#menu a, #men_final a{

  font-size: 1em;

  font-weight: 200;

  display: block;

  text-align: center;

  text-decoration: none;

  text-transform: uppercase;

  color: #fff;

  background-color:rgba(34, 1, 1,.95);

  margin:auto;

  padding: 0;

  line-height: 2em;

  border-bottom-color: red solid;

  ;

}



#men_final{margin-top: 2em;

 bottom:20px;}



#menu a{top:-1vh;},



#men_final a{

  margin-top: 2em;}



#menu a:hover {

  font-size: 1.25em;

  background-color: rgba(0, 133, 0,.5);

  transform: translateY(-6px);

  color:yellow;

  box-shadow: #fff 0px 0px 5px;

}



section{

  background-color: rgba(250,250,250,.9);

  }



  #formulario{

    margin:auto;
	z-index: 1;
  }

  #formulario input, textarea {

    margin: 10px 10px auto;

    border-radius: 10px;

    color:#666;

    }



  #enviar{

      display: block;

      float: right;

        }



    footer{

      background-color: black;

    }



div#legal{

  height:20vh;

  line-height: 2em;

  color:green;

  margin: auto;

  bottom: 0;

  text-align: center;}





/*pàgina_muestra*/



#muestra1 iframe

  {width: 100%;

    height: 60vh;

    border-radius: 15px;}



.if_estratos{
display:flex;
  width: 100%;

  height: 360px;

  border-radius: 10px;

  border: rgb(247,62,57) 10px solid;

  margin:5px;

  background-color: rgb(247,62,57);

}





.if_estratos:hover{

  border: green 10px solid;

  background-color: green;

  



}

/*P{AGINA COLABORADORES}*/





.colaborador{width: 80%;

  display: block;

  margin: auto;

  margin-top: 25%;

  }



.foto {

  display: block;

  width: 250px;

  height: 250px;

  margin: auto;

  background-color: rgb(41,84,150);

  padding: 10px;

  position: relative;

  transition: ease-out;

  margin-bottom: 20px;

  margin-left: 50px;

}





.foto:hover {

  background-blend-mode: soft-light; !important;

  transform: scale(1.1,1.1) !important; }



.foto:hover span.mas {

    transform: rotate(45deg) scale(1.3,1.3) !important;

  }



span#texto {

  text-transform: uppercase;

  color: green;

  font-weight: 600;

  font-size:  1.2em;

   font-family: 'Didact Gothic', sans-serif;

}

p#utilidad,p#presentacion, p#cuestionario, p#muestra {column-count: 2;

  column-gap: 30px;

  -webkit-column-count: 2;

  -webkit-column-gap: 30px;

  text-align: justify;}



body{

  font-family: font-family: 'Libre Franklin', sans-serif;

}

li{

  font-size: .9em;

  line-height: 1.5em;

  list-style: outside; ;

}



article{

  width:90%;

  margin: auto;

  background-color: rgba(242,239,233,.9);

  padding: 10px;



}



p{font-size: 1em;}





/*las fotos de los encuestadores van como background-image, aparte de los hipervinculos para lightbox*/

#foto1{

  background-image: url(../images/image-1.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}



#foto2{

  background-image: url(../images/image-2.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto3{

  background-image: url(../images/image-3.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto4 {

  background-image: url(../images/image-4.jpg);

  background-size: cover;

    background-repeat: no-repeat;
	
}

#foto5{

  background-image: url(../images/image-5.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto6{

  background-image: url(../images/image-6.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto7{

  background-image: url(../images/image-7.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto8{

  background-image: url(../images/image-8.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto9{

  background-image: url(../images/image-9.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto10{

  background-image: url(../images/image-10.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto11{

  background-image: url(../images/image-11.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}

#foto12{

  background-image: url(../images/image-12.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}


#foto13{

  background-image: url(../images/image-13.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}



#foto14{

  background-image: url(../images/image-14.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}


#foto15{

  background-image: url(../images/image-15.JPG);

  background-size: cover;

    background-repeat: no-repeat;

}


#foto16{

  background-image: url(../images/image-16.jpg);

  background-size: cover;

    background-repeat: no-repeat;

}









.mas {

  display: block;

  border-radius: 100%;

  background-color: rgba(141,5,5,.5);

  margin:auto;

  border: 2px white solid;

  width: 40px;

  height: 40px;

  color:white;

  font-size: 1.5em;

  text-align: center;

  line-height:1.75;

  position: absolute;

  top:45%;

  left:45%;

  font-weight: 900;

  box-shadow: yellow 0px 0px 15px;

}



#art2 img{

  width: auto;

  height: auto;

}













@media screen and (max-width:750px){

  h1{font-size: 1.2em; margin-top: 3vh;}

  h2{font-size: 1em;}

  h3{font-size:1.5em;}

  h5{font-size: 1.25em;}

  header{height: 18vh ;}

  nav #menu {display: none;

      background-color: rgba(164,9,0,.75);}

  nav #menu a{font-size: .8em ;

    width: 90%;

    line-height: 1.5em;

    padding: 5px;

    margin:5px; }

    .tope {

      height: 12vh;}





  header #minimenu span {

    display: block;

   top: .75vh;

       left: 40%;

 }

  span#encender{display:block; font-size: 2vh; }

  span#apagar{display:block; font-size: 2vh; }



  p#presentacion, p#utilidad p#muestra {column-count: 1;

    column-gap: 0px;

    -webkit-column-count: 1;

    -webkit-column-gap: 0px;

    text-align: justify;}

  }







@media screen and (max-width:650px){

  p#utilidad,p#presentacion p#muestra {column-count: 1;

    column-gap: 30px;

    -webkit-column-count: 1;

    -webkit-column-gap: 30px;

    text-align: justify;}

  



p#utilidad, p#presentacion, p#cuestionario, p#muestra {column-count: 1  ;

    column-gap: 30px;

    -webkit-column-count: 1;

    -webkit-column-gap: 30px;}



  h1 {

    font-size: 2.2em;

    margin-top: 1.5vh;

    margin-left: 5px;}

  h2{font-size: .3em;}

  header {height: auto;}

  header #minimenu span{

    top: 1vh;

    display: block;}





footer.col-lg-11 {

  right: -16.5%;}

    .col-lg-11 {

    width: 100%;

    }

  

  article{

    background-color: white;

  }

  }



@media screen and  (max-width: 544px){



.col-sm-push-2 {

    left: 10%;

    padding:4.5px;}

footer.col-lg-11 {

  left: -5%;

    padding:5px;}

body{

  background-color: black;

  background-image: none;

}



h1 {

    font-size: 2.2vh;

    margin-top: 1.5vh;

    margin-left: 5px;}

  h2{font-size: .3em;}



  p#utilidad,p#presentacion p#muestra{column-count: 1;

    column-gap: 30px;

    -webkit-column-count: 1;

    -webkit-column-gap: 30px;

    column-count: 1;

column-gap: 30px;

    text-align: justify;

  padding: 5px;}

  



.foto {

  margin-left:0;

}

}



@media screen and (max-width:650px) and (orientation: landscape) {

  

h1 {

    font-size: 1.2em;

    margin-top: 0.5em;

    margin-left: 5px;}



}







@media screen and (max-width:800px) and (orientation: landscape) {

header #minimenu span {

    display: block;

    top: 4.75vh;

    left: 60%;



}

article{

    background:transparent;

  }

}

@media screen and (max-width:1024px) and (orientation: portrait) {
  
h1 {
    font-size: 1.75em;
    margin-top: 1.75em;
    margin-bottom: 1.8em;
    margin-left: 5px;
}

}

@media screen and (max-width:600px) and (orientation: portrait) {
  
h1 {
    font-size: 1.0em;
    margin-top: 1.25em;
    margin-bottom: 1.2em;
    margin-left: 5px;
}

}